
<template>
  <div class = "Swiper">
    <router-link to = "galary" append>
        <swiper :options="swiperOption">
            <swiper-slide 
            v-for = "item of swiperList" 
            :key = "item.id">
                <div class = img-wrapper>
                    <img 
                    :src = "item.imgUrl" 
                    class = "swiperimg">
                </div>
                <div class = desc-wrapper>
                    <div class = "left">{{item.data}}</div>
                    <div class = "middle">{{item.page}}</div>
                    <div class = "right">{{item.number}}</div>
                </div>
            </swiper-slide>
        </swiper>
    </router-link>
  </div>
</template>

<script>

export default {
  props:['swiperList'],
  name:'detailSwiper',
  data(){
      return{
        swiperOption:{
        loop:true,
        },
      }
  }
  

}
</script>

<style lang = "stylus" scoped>
.img-wrapper
  overflow:hidden
  height:0
  padding-bottom:41.5%
  background:#ccc
  .swiper-img
    max-width:100%
.desc-wrapper
  position:absolute
  top:2.4rem
  left:0
  background:rgba(0,0,0,.6)
  color:#fff
  width:100%
  display:flex
  
  .left
    float:left
    margin-left:.4rem
    color:#fff
    font-size:.3rem
  .middle
    flex:1
    padding-left:3rem
    color:#fff
    font-size:.3rem
  .right:
    float:right
    margin-right:.1rem
    color:#fff
    font-size:.3rem
</style>